<template>
  <div class="login-container" >
    <mu-card class="login-card" raised>
      <mu-form ref="form" :model="validateForm" class="mu-demo-form">
        <mu-card-title title="找回密码"/>
        <mu-card-text>
          <mu-form-item label="手机号" help-text="" prop="phone" :rules="phoneRules">
            <mu-text-field v-model="validateForm.phone" prop="phone"/>
          </mu-form-item>
          <mu-form-item label="验证码" prop="code" :rules="CodeRules">
            <mu-text-field v-model="validateForm.code" prop="code" style="width: 50%"/>
            <mu-button color="goldenrod" @click="checkPhone">获取验证码</mu-button>
          </mu-form-item>

          <mu-form-item label="密码" prop="password" :rules="passwordRules">
            <mu-text-field type="password" v-model="validateForm.password" prop="password" />
          </mu-form-item>

          <mu-form-item label="确认密码" prop="confirmPassword" :rules="ConfirmPasswordRules">
            <mu-text-field type="password" v-model="validateForm.confirmPassword" prop="confirmPassword"/>
          </mu-form-item>
        </mu-card-text>
        <mu-card-actions>
          <mu-form-item>
            <mu-button color="secondary" @click="submit">确认修改</mu-button>
            <mu-button @click="navigateTo('/')">先浏览房间</mu-button>
          </mu-form-item>
        </mu-card-actions>
      </mu-form>
    </mu-card>
  </div>
</template>

<script>
import { userLogin,getUserInfoByUsername } from "@/api/user";
import Cookies from 'js-cookie'
import { getCode,retrievePassword} from "@/api/user";
export default {
  name: "RetrievePassword",
  data () {
    return {
      //校验用户是否填写了用户名，密码，然后进行提示
      phoneRules: [
        { validate: (val) => /^1[3-9]\d{9}$/.test(val),
          message: '请输入正确的手机号',
          trigger: 'blur'
        },
      ],
      CodeRules: [
        { validate: (val) => !!val, message: '必须填写验证码'},
      ],
      passwordRules: [
        { validate: (val) => !!val, message: '必须填写密码'},
      ],
      ConfirmPasswordRules: [
        { validate: (val) => !!val, message: '必须填写密码'},
      ],
      validateForm: {
        phone: '',
        code: '',
        password: '',
        confirmPassword: ''
      },
      userId: null,
      btnLoading: false
    }
  },
  methods: {
    navigateTo(val){
      this.$router.push(val);
    },
    checkPhone () {
      if (!this.validateForm.phone) {
        this.$message.error('手机号不能为空');
        return;
      }
      getCode(this.validateForm.phone).then((res) => {
        if (res.code==1000){
          this.$message.success("验证码发送成功")
        }else {
          this.$message.error("发送失败")
        }
      })
    },
    submit () {
      //提交表单前先判断是否填写了用户名和密码
      this.$refs.form.validate().then((result) => {
        if (result === false){
          //muse-ui里面的toast组件
          this.$message.error("请填入完整信息！")
        } else {
          retrievePassword(this.validateForm).then((res)=>{
            console.log(res);
            if (res.code==1000){
              this.$message.success("修改成功，请前往登录")
              this.$router.push('/login')
            }else {
              this.$message.error(res.message)
            }
          })
        }
      });
    },
    clear () {
      this.$refs.form.clear();
      this.validateForm = {
        username: '',
        password: ''
      };
    }
  }
}
</script>

<style scoped>
.login-container{
  width: 100%;
  height: 750px;
  background-image: linear-gradient(270deg,#8146b4,#6990f6);
  padding: 8px;
}
.mu-demo-form {
  width: 100%;
}
.login-card{
  width: 100%;
  max-width: 400px;
  margin: 50px auto;
}
</style>
